<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="box">

    </div>

    <script src="./js/react18.js"></script>
    <script src="./js/react-dom18.js"></script>
    <script src="./js/babel.min.js"></script>
    <script src="./js/prop-types.js"> </script>

    <script type="text/babel">

        // call，apply和bind的区别：
        // 一、相同点：
        //  三者都可以改变this的指向
        // 二、不同点：
        //  1、call和apply作用相同，都是用来调用原函数的。call和apply的第一个参数就是原函数里的this对象。
        //      1）、apply的第二个参数是原函数的参数，是数组形式，可以接收arguments来让代码更加容易维护。
        //      2)、 call 从第二个参数朝后的所有参数，是原函数的参数。
        //  2、bind：
        //     bind不会调用原函数。bind函数会把原函数和this指向进行绑定，产生新的函数。新的函数里的this，永远不变。


        // 创建一个根对象：
        let root = ReactDOM.createRoot(document.getElementById("box"));


        class MyPerson extends React.Component {

            constructor(props) {
                super();
                this.fn04 = this.fn04.bind(this);//bind把 this.fn04和this（bind的参数）绑在一起，产生新的函数，赋给另外一个变量
            }

            fn01(){
                console.log("fn01");
            }

            fn03(){
                console.log("fn03里的this",this);// 默认情况下，react的事件处理函数里的this是undefined。
            }
            
            fn04(){
                console.log("fn04里的this",this);
            }
            
            fn05(){
                console.log("fn05里的this",this);
            }
            
            fn06=()=>{
                console.log("fn06里的this",this);
            }

            
            fn07(){
                console.log("fn07里的this",this);
            }

            render() {
                console.log("render");
                return (
                    <div>
                        <h1>状态机</h1>
                        {/*事件绑定的基本格式*/}
                        <input type="button" value="绑定事件01" onClick={this.fn01}  />
                        <input type="button" value="绑定事件02" onClick={()=>{console.log("函数体");}}  />

                        {/*事件处理函数里的this*/}
                        {/*默认情况下，react的事件处理函数里的this是undefined*/}
                        <input type="button" value="绑定事件03" onClick={this.fn03}  />

                        {/*如何让事件处理函数里的this成为组件对象本身*/}
                        {/*一、使用bind*/}
                        {/*1、在构造函数里使用bind的方式把组件对象和函数进行绑定*/}
                        <input type="button" value="绑定事件04" onClick={this.fn04}  />
                        {/*2、直接在绑定事件是使用bind*/}
                        <input type="button" value="绑定事件05" onClick={this.fn05.bind(this)}  />
                        {/*二、使用箭头函数 */}
                        {/*3、使用箭头函数：在定义实例方法时，使用箭头函数*/}
                        <input type="button" value="绑定事件06" onClick={this.fn06}  />
                        {/*4、使用箭头函数：在绑定事件时，使用箭头函数*/}
                        <input type="button" value="绑定事件07" onClick={()=>this.fn07()}  />


                    </div>
                )
            }

        }



        const jsx = (
            <div>
                <MyPerson />
            </div>)


        // 把jsx渲染到根对象对应的dom容器里
        root.render(jsx);


    </script>
</body>

</html>